<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
  <title>Vite + Vue</title>
</head>

<body>
  <script id="vertex-shader-2d" type="x-shader/x-vertex">
    attribute vec4 a_position;
    attribute vec4 a_color;

    uniform mat4 u_matrix;
    varying vec4 v_color;
    //所有着色器都有的main方法
    void main() {
      //位置与矩阵相乘
      gl_Position = u_matrix * a_position;
      // 将颜色传递给片断着色器
      v_color = a_color;
    }
  </script>
  <script id="fragment-shader-2d" type="notjs">
    // 片断着色器没有默认精度，所以我们需要设置一个精度
    // mediump是一个不错的默认值，代表“medium precision”（中等精度）  
    precision mediump float;
    // 从顶点着色器中传入
    varying vec4 v_color; 
    void main() {
      // gl_FragColor是一个片断着色器主要设置的变量,上方我们设置 gl_FragColor 为 1, 0, 0.5, 1，其中1代表红色值，0代表绿色值， 0.5代表蓝色值，最后一个1表示阿尔法通道值。WebGL中的颜色值范围从 0 到 1 。
      gl_FragColor = v_color; 
    }
  </script>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>